<template>
  <div
    :style="`width: ${width.toString().includes('%') ? width : width + 'px'}`"
  >
    <el-select
      v-if="isMultiple"
      ref="selectRef"
      v-model="personSelectOptions"
      :plantId="plantId != '' ? plantId : ''"
      :materialType="materialType"
      :placeholder="placeholder"
      :disabled="disabled"
      :collapse-tags="true"
      :collapse-tags-tooltip="true"
      :max-collapse-tags="maxCollapseTags"
      :multiple="true"
      :style="`width: ${width.toString().includes('%') ? width : width + 'px'}`"
      @visible-change="openSelectOriganization"
      @remove-tag="removeSelection"
    >
      <el-option
        v-for="item in personOptions"
        :key="item.id"
        :label="item.spareCode ? `${item.spareCode}` : ''"
        :value="item.id"
      />
    </el-select>
    <el-select
      v-else
      ref="selectRef"
      v-model="singleSelect"
      :placeholder="placeholder"
      :disabled="disabled"
      clearable
      :style="`width: ${width.toString().includes('%') ? width : width + 'px'}`"
      @visible-change="openSelectOriganization"
      @clear="removeSelection"
    >
      <el-option
        v-for="item in personOptions"
        :key="item.id"
        :label="item.spareCode ? `${item.spareCode}` : ''"
        :value="item.id"
      />
    </el-select>
    <eamPartsDialog
      v-model:visible="personSelect.visible"
      :plantId="plantId != '' ? plantId : ''"
      :data="personSelect.data"
      :title="title"
      :isMultiple="isMultiple"
      :materialType="materialType"
      @echo-info="getPersonSelect"
    />
  </div>
</template>

<script setup lang="ts">
import { ElSelect } from "element-plus";
defineOptions({
  name: "WCSMATERIALREQUESTEINPUT",
  inheritAttrs: false,
});

const emit = defineEmits(["get-device"]);

const props = defineProps({
  title: {
    type: String,
    default: "备件选择",
  },
  placeholder: {
    type: String,
    default: "请选择备件",
  },
  isMultiple: {
    type: Boolean,
    default: true,
  },
  maxCollapseTags: {
    type: Number,
    default: 5,
  },
  width: {
    type: [String, Number],
    default: 200,
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  showSelectDevice: {
    type: Array,
    default: () => [],
  },
  plantId: {
    type: String,
    default: () => "",
  },
  materialType: {
    type: String,
    default: () => "",
  },
});

const {
  maxCollapseTags,
  width,
  isMultiple,
  showSelectDevice,
  disabled,
  placeholder,
  plantId,
  materialType,
  title,
} = toRefs(props);

/** 打开人员选择器方法   start **/
interface SelectOption {
  id?: string;
}
const personSelectOptions: any = ref([]); // 选择器 mode
const personOptions: any = ref([]); // 选择器 list
const selectRef = ref(ElSelect); // 选择器 ref
const singleSelect = ref(""); // 单选绑定

// 定义 人员选择器弹窗参数
const personSelect = reactive<DialogOption>({
  visible: false,
  data: [],
});
// 移除 人员tag标签
function removeSelection(id: SelectOption) {
  personOptions.value.forEach((row: SelectOption, index: number) => {
    if (row.id === id) personOptions.value.splice(index, 1);
  });
  if (!isMultiple.value) {
    personSelectOptions.value = [];
    personOptions.value = [];
  }
  emit("get-device", personSelectOptions.value, personOptions.value);
}
// 打开 人员选择器弹窗
function openSelectOriganization(event: boolean) {
  if (event) {
    selectRef.value.blur(); // 隐藏下拉框
    personSelect.visible = true;
    personSelect.data = personOptions.value;
  }
}
// 接收 人员选择器回调参数
function getPersonSelect(options: any) {
  personOptions.value = options;
  const ids: any = [];
  options?.map((item: SelectOption) => ids.push(item.id));
  personSelectOptions.value = ids || [];
  singleSelect.value = ids[0];
  emit("get-device", personSelectOptions.value, personOptions.value);
}

/** 打开人员选择器方法   end **/
watch(
  () => showSelectDevice,
  async (newVal: any) => {
    if (newVal.value.length) {
      personOptions.value = newVal.value;
      const ids: any = [];
      newVal.value?.map((item: SelectOption) => ids.push(item.id));
      personSelectOptions.value = ids || [];
      singleSelect.value = ids[0];
    } else {
      personOptions.value = [];
      personSelectOptions.value = [];
      singleSelect.value = "";
    }
  },
  { deep: true, immediate: true }
);

onMounted(() => {});

defineExpose({
  removeSelection,
});
</script>
